<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="团队统计"
    :showCancelBtn="false" :showOkBtn="false" :canFullscreen="false" :centered="true"
    :width="600" wrapClassName="order-detail"
    :bodyStyle="{height:'calc(100vh - 250px)', overflowY:'hidden'}"
  >
    <div style="zoom: 1;  padding: 0 10px 10px; margin-top: 10px;">
       <!--团队统计 min-width:800px;-->
       <div class="listtab1">
        <div class="theadSticky">
          <span class="float-left h-30px leading-30px w150 font-bold text-lg">
            团队名称：{{queryParam.capitalName}}
          </span>
          <span class="float-right h-30px leading-30px font-bold text-lg" >
            
          </span>
        </div>
        <table class="orderTable" id="orderTable" >
          <tbody>
          <tr class="h-35px">
            <th class="w-60px">放款金额</th>
            <th class="w-60px">放款台次</th>
            <th class="w-60px text-right">区域提成</th>
            <th class="w-60px text-right">区域毛利</th>
            <th class="w-60px text-right"><span v-if="hasPermission('order:shareholder')">股东毛利</span></th>
          </tr>
          <tr class="h-35px">
            <td>{{business.amountTotal}}</td>
            <td>{{business.orderCount}}</td>
            <td class="text-right">{{business.qyPercentage}}</td>
            <td class="text-right">{{business.zfProfitGross}}</td>
            <td class="text-right"><span v-if="hasPermission('order:shareholder')">{{business.nbProfitGross}}</span></td>
          </tr>
          </tbody>
        </table>
      </div>

       <!--资方统计 min-width:800px;-->
       <div class="listtab1">
        <div class="theadSticky">
          <span class="float-left h-30px leading-30px w150 font-bold text-lg">
            资方产品: 
          </span>
          <span class="float-right h-30px leading-30px font-bold text-lg" >
            
          </span>
        </div>
        <table class="orderTable" id="orderTable" >
          <tbody>
          <tr class="h-35px">
            <th class="w-120px tac">资方产品</th>
            <th class="w-60px text-right">放款金额</th>
            <th class="w-60px text-right">金额占比</th>
            <th class="w-60px text-right">放款台次</th>
            <th class="w-60px text-right">台次占比</th>
          </tr>
          <tr class="h-35px" v-for="customer in customers">
            <td class="tips text-left">{{customer.name}}</td>
            <td class="tips text-right text-red-500 font-500">{{customer.amountTotal}}</td>
            <td class="tips text-right">{{customer.amountTotalPer}}</td>
            <td class="tips text-right">{{customer.orderCount}}</td>
            <td class="tips text-right">{{customer.orderCountPer}}</td>
          </tr>
          </tbody>
          <tfoot>
          <tr class="h-35px" >
            <td class="tips text-left">{{customersTotal.name}}</td>
            <td class="tips text-right text-red-500 font-500">{{customersTotal.amountTotal}}</td>
            <td class="tips text-right">{{customersTotal.amountTotalPer}}</td>
            <td class="tips text-right">{{customersTotal.orderCount}}</td>
            <td class="tips text-right">{{customersTotal.orderCountPer}}</td>
          </tr>
          </tfoot>
        </table>
      </div>

      <!--客户等级-->
      <div class="listtab1">
        <div class="theadSticky">
          <span class="float-left h-30px leading-30px w150 font-bold text-lg">
            客户等级
          </span>
        </div>
        <table class="orderTable" id="orderTable" >
          <tbody>
          <tr class="h-35px">
            <th class="w-120px">客户等级</th>
            <th class="w-60px text-right">放款金额</th>
            <th class="w-60px text-right">金额占比</th>
            <th class="w-60px text-right">放款台次</th>
            <th class="w-60px text-right">台次占比</th>
          </tr>
          <tr class="h-35px" v-for="level in levels">
            <td class="tips text-left">{{level.name}}</td>
            <td class="tips text-right text-red-500 font-500">{{level.amountTotal}}</td>
            <td class="tips text-right">{{level.amountTotalPer}}</td>
            <td class="tips text-right">{{level.orderCount}}</td>
            <td class="tips text-right">{{level.orderCountPer}}</td>
          </tr>
          </tbody>
          <tfoot>
          <tr class="h-35px" >
            <td class="tips text-left">{{customersTotal.name}}</td>
            <td class="tips text-right text-red-500 font-500">{{customersTotal.amountTotal}}</td>
            <td class="tips text-right">{{customersTotal.amountTotalPer}}</td>
            <td class="tips text-right">{{customersTotal.orderCount}}</td>
            <td class="tips text-right">{{customersTotal.orderCountPer}}</td>
          </tr>
          </tfoot>
        </table>
      </div>

      <!--利率数据-->
      <div class="listtab1">
        <div class="theadSticky">
          <span class="float-left h-30px leading-30px w150 font-bold text-lg">
            利率数据
          </span>
        </div>
        <table class="orderTable" id="orderTable" >
          <tbody>
          <tr class="h-35px">
            <th class="w-120px">产品利率</th>
            <th class="w-60px text-right">放款金额</th>
            <th class="w-60px text-right">金额占比</th>
            <th class="w-60px text-right">放款台次</th>
            <th class="w-60px text-right">台次占比</th>
          </tr>
          <tr class="h-35px" v-for="rate in rates">
            <td class="tips text-left">{{rate.name}}</td>
            <td class="tips text-right text-red-500 font-500">{{rate.amountTotal}}</td>
            <td class="tips text-right">{{rate.amountTotalPer}}</td>
            <td class="tips text-right">{{rate.orderCount}}</td>
            <td class="tips text-right">{{rate.orderCountPer}}</td>
          </tr>
          </tbody>
          <tfoot>
          <tr class="h-35px" >
            <td class="tips text-left">{{customersTotal.name}}</td>
            <td class="tips text-right text-red-500 font-500">{{customersTotal.amountTotal}}</td>
            <td class="tips text-right">{{customersTotal.amountTotalPer}}</td>
            <td class="tips text-right">{{customersTotal.orderCount}}</td>
            <td class="tips text-right">{{customersTotal.orderCountPer}}</td>
          </tr>
          </tfoot>
        </table>
      </div>

      <!--融资金额-->
      <div class="listtab1">
        <div class="theadSticky">
          <span class="float-left h-30px leading-30px w150 font-bold text-lg">
            融资金额
          </span>
        </div>
        <table class="orderTable" id="orderTable" >
          <tbody>
          <tr class="h-35px">
            <th class="w-120px">金额区间</th>
            <th class="w-60px text-right">放款金额</th>
            <th class="w-60px text-right">金额占比</th>
            <th class="w-60px text-right">放款台次</th>
            <th class="w-60px text-right">台次占比</th>
          </tr>
          <tr class="h-35px">
            <td class="tips text-left">6万以内</td>
            <td class="tips text-right text-red-500 font-500">{{finances.Amount_00_06}}</td>
            <td class="tips text-right">{{finances.AmountPer_00_06}}</td>
            <td class="tips text-right">{{finances.Count_00_06}}</td>
            <td class="tips text-right">{{finances.CountPer_00_06}}</td>
          </tr>
          <tr class="h-35px">
            <td class="tips text-left">6-10万</td>
            <td class="tips text-right text-red-500 font-500">{{finances.Amount_06_10}}</td>
            <td class="tips text-right">{{finances.AmountPer_06_10}}</td>
            <td class="tips text-right">{{finances.Count_06_10}}</td>
            <td class="tips text-right">{{finances.CountPer_06_10}}</td>
          </tr>
          <tr class="h-35px">
            <td class="tips text-left">10-15万</td>
            <td class="tips text-right text-red-500 font-500">{{finances.Amount_10_15}}</td>
            <td class="tips text-right">{{finances.AmountPer_10_15}}</td>
            <td class="tips text-right">{{finances.Count_10_15}}</td>
            <td class="tips text-right">{{finances.CountPer_10_15}}</td>
          </tr>
          <tr class="h-35px">
            <td class="tips text-left">15-20万</td>
            <td class="tips text-right text-red-500 font-500">{{finances.Amount_15_20}}</td>
            <td class="tips text-right">{{finances.AmountPer_15_20}}</td>
            <td class="tips text-right">{{finances.Count_15_20}}</td>
            <td class="tips text-right">{{finances.CountPer_15_20}}</td>
          </tr>
          <tr class="h-35px">
            <td class="tips text-left">20-30万</td>
            <td class="tips text-right text-red-500 font-500">{{finances.Amount_20_30}}</td>
            <td class="tips text-right">{{finances.AmountPer_20_30}}</td>
            <td class="tips text-right">{{finances.Count_20_30}}</td>
            <td class="tips text-right">{{finances.CountPer_20_30}}</td>
          </tr>
          <tr class="h-35px">
            <td class="tips text-left">30-50万</td>
            <td class="tips text-right text-red-500 font-500">{{finances.Amount_30_50}}</td>
            <td class="tips text-right">{{finances.AmountPer_30_50}}</td>
            <td class="tips text-right">{{finances.Count_30_50}}</td>
            <td class="tips text-right">{{finances.CountPer_30_50}}</td>
          </tr>
          <tr class="h-35px">
            <td class="tips text-left">50万以上</td>
            <td class="tips text-right text-red-500 font-500">{{finances.Amount_50_ss}}</td>
            <td class="tips text-right">{{finances.AmountPer_50_ss}}</td>
            <td class="tips text-right">{{finances.Count_50_ss}}</td>
            <td class="tips text-right">{{finances.CountPer_50_ss}}</td>
          </tr>
          </tbody>
          <tfoot>
          <tr class="h-35px" >
            <td class="tips text-left">{{customersTotal.name}}</td>
            <td class="tips text-right text-red-500 font-500">{{customersTotal.amountTotal}}</td>
            <td class="tips text-right">{{customersTotal.amountTotalPer}}</td>
            <td class="tips text-right">{{customersTotal.orderCount}}</td>
            <td class="tips text-right">{{customersTotal.orderCountPer}}</td>
          </tr>
          </tfoot>
        </table>
      </div>

      <!---->
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import "/@/design/order.css";
  import { nextTick, ref, computed, unref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from "/@/hooks/web/useMessage";
  import { usersDetail } from "../api";
  import { usePermission } from '/@/hooks/web/usePermission';

  const { hasPermission } = usePermission();
  const { createMessage: $message } = useMessage();

  // Emits声明
  const emit = defineEmits(['register', 'success']);

  let loading     = ref(true);
  let business  = reactive<any>({});
  let customers = reactive<any>([]);
  let customersTotal = reactive<any>({});
  //客户等级
  let levels   = reactive<any>({});
  //利率占比
  let rates    = reactive<any>({});
  //融资金额
  let finances = reactive<any>({});

  //初始化 -------------------------------------------------------------
  //定义查询表单，查询条件
  let queryParam = reactive<any>({
    beginDate : '',
    endDate: '',
    customerId: '',
  });

  //------------------------------------------

  //TODO ------界面初始化---加载数据 -> 根据数据初始表单-------------
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    // setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
    // isUpdate.value = !!data?.isUpdate;

    //显示查询参数
    //Object.assign(queryParam, data.record);
    Object.assign(business, data.record);

    queryParam = {
      beginDate : data.record.beginDate,
      endDate: data.record.endDate,
      id: data.record.id,
      type: data.record.type,
      capitalName: data.record.capitalName,
    }

    //初始化数据
    orderTable()
    
    loading.value = true
  });

  //订单界面所有信息
  async function orderTable() {

    if (!queryParam.id) {
      $message.error("操作失败：订单编号为空!");
      return;
    }
    //business = reactive({});
    //policys  = reactive({});

    loading.value = true; 
    clearData();
    await usersDetail(queryParam).then((res) => {
      try {
        console.info(res);
        if (res.success == false) {
          $message.warning(res.message);
          return false;
        }
        let result = res.result;
        //1、业务数据 - 初始化
        Object.assign(customers, result.customers);
        Object.assign(customersTotal, result.customersTotal);
        Object.assign(levels, result.levels);
        Object.assign(rates, result.rates);
        Object.assign(finances, result.finances);
        console.info(levels)
      } catch (e) {
        alert(e);
        return false;
      }
    }).finally(() => {
      loading.value = false;
    });
  }

  function clearData() {
    customers = reactive({});
    customersTotal = reactive({});
    levels = reactive({});
    rates = reactive({});
  }
</script>

<style lang="less" scoped>

// newCode：新代码改为
body,html {
  width: 100%;
  min-height: 100vh;
}
.orderTable .ant-form-item {
  margin-bottom: 0px;
}

.theadSticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 10;

  padding:6px 4px;
  background:#fff;
  border: 1px solid #d6dde7;
  height: 42px;
  line-height: 30px;
  margin-bottom: -1px;
  font-size: 16px;
}

td p {
  text-align: left;
  span {
    display:inline-block;
  }
}
</style>